<script setup>
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import { useUserStore } from '@/store'
import { showToast, showConfirmDialog } from 'vant';
import { event } from 'vue-gtag'

import BiPopup from '@/components/biPopup/index.vue'
import BiNavBar from '@/components/biNavbar/index.vue'
import { submitApplicationWithdrawal } from '@/api/withdraw'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

const showPopup = ref(false)
function handleOpenPopup() {
    showPopup.value = true
}

function handleWithdrawalCallBack() {
    router.push({
        path: '/exchange'
    })
}

const paypalAccount = ref('')
async function handleApplyWithdrawal() {
    if (paypalAccount.value.length === 0) {
        showToast('The Paypal account cannot be empty')
        return
    }
    await showConfirmDialog({
        title: 'Tip',
        message: 'Confirmed withdrawal?',
        confirmButtonColor: '#df0e62',
        confirmButtonText: 'Confirm',
        cancelButtonText: 'Cancle'
    })

    try {
        await submitApplicationWithdrawal({
            device: userStore.uuid,
            balance: route.query.balance,
            payeeAccount: paypalAccount.value,
            withdrawType: route.query.withdrawType
        })
        event('提现', {
            userId: userStore.uuid,
            balance: route.query.balance,
            withdrawType: route.query.withdrawType == 1 ? 'coin' : 'cash'
        })
        handleOpenPopup()
    } catch (error) {
        console.error(error)
    }
}

</script>

<template>
    <div class="input">
        <BiNavBar @click-left="router.back">
            <template v-slot:center>
                <div class="paypal-logo">
                    <img src="@/assets/imgs/exchange/logo.png" alt="paypal" width="150">
                </div>
            </template>
        </BiNavBar>
        <div class="account">
            <input class="account_input" type="text" placeholder="Email or mobile number" v-model="paypalAccount">
        </div>
        <div class="button" @click="handleApplyWithdrawal">DONE</div>
    </div>

    <!-- 提醒用户金币或签到天数不足 -->
    <BiPopup v-model:show="showPopup" type="withdraw" :withdrawStatus="true" @click="handleWithdrawalCallBack">
        <div class="success">
            <div class="success-icon">
                <img class="success-icon_img" v-if="route.query.withdrawType == 1" src="@/assets/imgs/coin.png"
                    alt="coin" width="70">
                <img class="success-icon_img" v-if="route.query.withdrawType == 2" src="@/assets/imgs/cash.png"
                    alt="cash" width="70">
            </div>
            <span class="success-cash">+{{ route.query.balance }}</span>
        </div>
    </BiPopup>

</template>

<style scoped lang="scss">
.paypal-logo {
    width: 34vmin;
    height: 12vmin;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.input {
    width: 100%;
    height: 100%;

    .account {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 90%;
        margin: 0 auto;
        margin-top: 6vmin;

        &_input {
            width: 100%;
            font-size: var(--normal-font-size);
            padding: 2vmin 5vmin;
            border-radius: 1vmin;
            color: var(--text-color);
            border: 1px solid var(--task-color);
            caret-color: var(--task-color);
        }
    }

    .button {
        @extend .account;
        height: 10vmin;
        font-size: var(--small-font-size);
        background: linear-gradient(to bottom, #F68892, #FF5881);
        border-radius: 999px;
        margin-top: 5vmin;
        color: #ffffff;
        font-weight: bold
    }
}

.success {
    @extend %withdrawSuccess;
}
</style>